---
name: IconSelector 图标选择器
---

# IconSelector 图标选择器

## 说明

图标选择器组件有两个组件, 一个是选择器, 一个是图标展示.

由于图标来源于 `iconfont`, 因此两个组件都有 `iconfontClassName` 这个属性. 且 选择器和图标是配套的, 都有用样的颜色和图标范围. 因此建议在使用过程中, 建一个函数来包裹共同的参数, 例如:

```
|- components
  |- BusinessIcon.js
```

```jsx
// BusinessIcon.js

import React from 'react';
import OriginIcon from '@/molecules/IconSelector/Icon';
import OriginIconSelector from '@/molecules/IconSelector/IconSelector';
import '@/assets/oaicons/iconfont.css';

const iconfontClassName = 'iconfont';
const iconList = ['foo', 'bar'];
const colorList = ['#FFA22D|#FFF5EA', '#5590F6|#EDF3FE', '#FF7760|#FFF1EF', '#44C69D|#ECF9F5'];

const withIcon = props => {
    return <OriginIcon iconfontClassName={iconfontClassName} {...props} />;
};

const withIconSelector = props => (
    <OriginIconSelector iconfontClassName={iconfontClassName} iconList={iconList} colorList={colorList} {...props} />
);

export const Icon = withIcon;
export const IconSelector = withIconSelector;
```

import Demo from './Demo';

## API

### IconSelector

| Name                     | Type    | Default | Description                |
| :----------------------- | :------ | :------ | :------------------------- |
| iconfontClassName        | String  | -       | 必填, iconfont 类名        |
| colorList                | Array   | -       | 必填, 颜色列表             |
| iconList                 | Array   | -       | 必填, 图标列表             |
| defaultSelectFirstOption | Boolean | false   | 是否默认选择选项的第一个值 |

### Icon

| Name | Type | Default | Description |
| :-- | :-- | :-- | :-- |
| iconfontClassName | String | - | 必填, iconfont 类名 |
| icon | String | null | 要显示的图标, 可以是对象类型 { iconName, color }, 也可是字符串类型 "iconName \| 前景色 \| 背景色" |

## Demo

这是一个组件基本示例，包括代码基本组织方式。

<Demo />
